<template>
  <div class="mobile-layout">
    <!-- 顶部导航栏 -->
    <div class="mobile-header">
      <div class="header-left">
        <el-button text @click="showUserMenu = true" class="user-btn">
          <el-avatar :size="32">
            <el-icon><User /></el-icon>
          </el-avatar>
        </el-button>
      </div>
      <div class="header-center">
        <h1 class="app-title">海关AI系统</h1>
      </div>
      <div class="header-right">
        <el-button text @click="showNotifications" class="notification-btn">
          <el-badge :value="notificationCount" :hidden="notificationCount === 0">
            <el-icon><Bell /></el-icon>
          </el-badge>
        </el-button>
      </div>
    </div>

    <!-- 主内容区域 -->
    <div class="mobile-content" :style="{ paddingBottom: '80px' }">
      <router-view />
    </div>

    <!-- 底部导航栏 -->
    <div class="mobile-tabbar">
      <div 
        v-for="tab in tabs" 
        :key="tab.name"
        class="tab-item"
        :class="{ active: activeTab === tab.name }"
        @click="switchTab(tab)"
      >
        <el-icon class="tab-icon">
          <component :is="tab.icon" />
        </el-icon>
        <span class="tab-label">{{ tab.label }}</span>
        <div v-if="tab.badge" class="tab-badge">{{ tab.badge }}</div>
      </div>
    </div>

    <!-- 用户菜单抽屉 -->
    <el-drawer
      v-model="showUserMenu"
      direction="ltr"
      size="280px"
      :with-header="false"
    >
      <div class="user-drawer">
        <div class="user-profile">
          <el-avatar :size="60">
            <el-icon><User /></el-icon>
          </el-avatar>
          <div class="user-info">
            <h3>{{ userInfo.name }}</h3>
            <p>{{ userInfo.role }}</p>
          </div>
        </div>
        
        <div class="user-menu">
          <div class="menu-item" @click="handleUserAction('profile')">
            <el-icon><User /></el-icon>
            <span>个人信息</span>
            <el-icon class="arrow"><ArrowRight /></el-icon>
          </div>
          <div class="menu-item" @click="handleUserAction('settings')">
            <el-icon><Setting /></el-icon>
            <span>系统设置</span>
            <el-icon class="arrow"><ArrowRight /></el-icon>
          </div>
          <div class="menu-item" @click="handleUserAction('help')">
            <el-icon><QuestionFilled /></el-icon>
            <span>帮助中心</span>
            <el-icon class="arrow"><ArrowRight /></el-icon>
          </div>
          <div class="menu-item logout" @click="handleLogout">
            <el-icon><SwitchButton /></el-icon>
            <span>退出登录</span>
          </div>
        </div>
      </div>
    </el-drawer>

    <!-- 通知抽屉 -->
    <el-drawer
      v-model="showNotificationDrawer"
      direction="rtl"
      size="100%"
      title="消息通知"
    >
      <div class="notification-list">
        <div v-for="notification in notifications" :key="notification.id" class="notification-item">
          <div class="notification-icon" :class="notification.type">
            <el-icon><Bell /></el-icon>
          </div>
          <div class="notification-content">
            <h4>{{ notification.title }}</h4>
            <p>{{ notification.content }}</p>
            <span class="notification-time">{{ notification.time }}</span>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  User, Bell, Setting, SwitchButton, ArrowRight, QuestionFilled,
  Monitor, Cpu, DataAnalysis, Warning, Tools
} from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()

// 响应式数据
const showUserMenu = ref(false)
const showNotificationDrawer = ref(false)
const notificationCount = ref(3)

// 用户信息
const userInfo = ref({
  name: '系统管理员',
  role: '超级管理员'
})

// 通知列表
const notifications = ref([
  {
    id: 1,
    type: 'success',
    title: '参数更新成功',
    content: '数据库连接池参数已更新',
    time: '2分钟前'
  },
  {
    id: 2,
    type: 'warning',
    title: 'AI推荐提醒',
    content: '建议优化缓存TTL配置',
    time: '10分钟前'
  },
  {
    id: 3,
    type: 'info',
    title: '系统消息',
    content: '定时任务执行完成',
    time: '1小时前'
  }
])

// 底部导航配置
const tabs = ref([
  {
    name: 'dashboard',
    label: '概览',
    icon: Monitor,
    path: '/dashboard'
  },
  {
    name: 'param-engine',
    label: '参数引擎',
    icon: Cpu,
    path: '/param-engine/dashboard'
  },
  {
    name: 'monitoring',
    label: '监控',
    icon: DataAnalysis,
    path: '/monitoring',
    badge: '2'
  },
  {
    name: 'alerts',
    label: '预警',
    icon: Warning,
    path: '/alerts'
  },
  {
    name: 'tools',
    label: '工具',
    icon: Tools,
    path: '/tools'
  }
])

// 当前激活的标签
const activeTab = computed(() => {
  if (route.path.startsWith('/param-engine')) return 'param-engine'
  if (route.path.startsWith('/monitoring')) return 'monitoring'
  if (route.path.startsWith('/alerts')) return 'alerts'
  if (route.path.startsWith('/tools')) return 'tools'
  return 'dashboard'
})

// 切换标签
const switchTab = (tab) => {
  if (tab.path) {
    router.push(tab.path)
  } else {
    ElMessage.info(`${tab.label}功能开发中`)
  }
}

// 显示通知
const showNotifications = () => {
  showNotificationDrawer.value = true
}

// 用户操作
const handleUserAction = (action) => {
  showUserMenu.value = false
  switch (action) {
    case 'profile':
      ElMessage.info('个人信息功能开发中')
      break
    case 'settings':
      ElMessage.info('系统设置功能开发中')
      break
    case 'help':
      ElMessage.info('帮助中心功能开发中')
      break
  }
}

// 退出登录
const handleLogout = () => {
  showUserMenu.value = false
  ElMessageBox.confirm('确定要退出登录吗？', '退出确认', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    localStorage.removeItem('token')
    ElMessage.success('已成功退出登录')
    router.push('/login')
  }).catch(() => {
    // 用户取消
  })
}

onMounted(() => {
  // 移动端初始化
  console.log('移动端布局已加载')
})
</script>

<style scoped>
.mobile-layout {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f5f7fa;
}

/* 顶部导航栏 */
.mobile-header {
  height: 56px;
  background: #1890ff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  color: white;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.header-left,
.header-right {
  width: 48px;
  display: flex;
  justify-content: center;
}

.header-center {
  flex: 1;
  text-align: center;
}

.app-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  color: white;
}

.user-btn,
.notification-btn {
  color: white !important;
  padding: 8px;
}

/* 主内容区域 */
.mobile-content {
  flex: 1;
  margin-top: 56px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 底部导航栏 */
.mobile-tabbar {
  height: 80px;
  background: white;
  display: flex;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  border-top: 1px solid #e8e8e8;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.tab-item.active {
  color: #1890ff;
}

.tab-item:active {
  background: rgba(24, 144, 255, 0.1);
  border-radius: 8px;
}

.tab-icon {
  font-size: 24px;
  margin-bottom: 4px;
}

.tab-label {
  font-size: 12px;
  font-weight: 500;
}

.tab-badge {
  position: absolute;
  top: 4px;
  right: 50%;
  transform: translateX(50%);
  background: #ff4d4f;
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 16px;
  text-align: center;
}

/* 用户抽屉 */
.user-drawer {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.user-profile {
  background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
  color: white;
  padding: 32px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.user-info {
  margin-top: 16px;
}

.user-info h3 {
  margin: 0 0 4px 0;
  font-size: 18px;
  font-weight: 600;
}

.user-info p {
  margin: 0;
  font-size: 14px;
  opacity: 0.8;
}

.user-menu {
  flex: 1;
  padding: 20px 0;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.menu-item:hover {
  background: #f5f5f5;
}

.menu-item.logout {
  color: #ff4d4f;
  border-top: 1px solid #f0f0f0;
  margin-top: auto;
}

.menu-item .el-icon:first-child {
  font-size: 20px;
  margin-right: 16px;
  width: 20px;
}

.menu-item span {
  flex: 1;
  font-size: 16px;
}

.menu-item .arrow {
  font-size: 16px;
  color: #bfbfbf;
}

/* 通知列表 */
.notification-list {
  padding: 20px 0;
}

.notification-item {
  display: flex;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
}

.notification-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  flex-shrink: 0;
}

.notification-icon.success {
  background: #f6ffed;
  color: #52c41a;
}

.notification-icon.warning {
  background: #fff7e6;
  color: #fa8c16;
}

.notification-icon.info {
  background: #f0f5ff;
  color: #1890ff;
}

.notification-content {
  flex: 1;
}

.notification-content h4 {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 600;
  color: #262626;
}

.notification-content p {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #595959;
  line-height: 1.4;
}

.notification-time {
  font-size: 12px;
  color: #bfbfbf;
}

/* 响应式调整 */
@media (max-width: 320px) {
  .tab-label {
    font-size: 10px;
  }
  
  .tab-icon {
    font-size: 20px;
  }
}
</style>


